<template>
  <div class="newMembers">
    <!--
            作者：offline
            时间：2017-12-22
            描述：头部mintui共用部分start
        -->
    <!--<mt-header fixed title="添加新成员">-->
      <!--<router-link to="/" slot="left">-->
        <!--<mt-button icon="back">返回</mt-button>-->
      <!--</router-link>-->
      <!--<mt-button icon="more" slot="right"></mt-button>-->
    <!--</mt-header>-->
    <!--
            作者：offline
            时间：2017-12-22
            描述：头部mintui共用部分end
        -->
    <!--<div class="newMembers_search">
      <div class="search_box">
        <div class="search_imgbox">
          <div class="search_input">
            <img src="../assets/images/search.png" @click="clk"/>
            &lt;!&ndash;<input v-model="telphone" type="text" name="" id="" value="" placeholder="搜索" detect-change="off"&ndash;&gt;
                   &lt;!&ndash;initial='off'/>&ndash;&gt;
            &lt;!&ndash;<p>{{telphone}}</p>&ndash;&gt;
          </div>
        </div>
      </div>
    </div>-->
    <div class="members_title">新成员</div>
    <div class="members_list">
      <div class="m_list" v-for="(m_list,index) in list">
        <div class="list_img">
          <!--<img :src="t_list.src"/>-->
          <img :src="m_list.headImg">
        </div>
        <div class="list_c">
          <p class="lp_name">{{m_list.nickName}}</p>
          <p class="lp_num">{{m_list.mobile}}</p>
        </div>
        <div class="members_money">
          <p class="accept" v-show="ok" @click="add(index)">添加</p>
          <p class="yi_accept" v-show="yes">已添加</p>
        </div>
      </div>
      <!--<div class="t_list">
                <div class="list_img">
                    <img src="../assets/images/toux.png" />
                </div>
                <div class="list_c">
                    <p class="lp_name">张三</p>
                    <p class="lp_num">18211020533</p>
                </div>
                <div class="team_money">
                    <p class="t_money">￥2000</p>
                    <p class="t_commission">佣金：249</p>
                </div>
            </div>
            <div class="t_list">
                <div class="list_img">
                    <img src="../assets/images/toux.png" />
                </div>
                <div class="list_c">
                    <p class="lp_name">张三</p>
                    <p class="lp_num">18211020533</p>
                </div>
                <div class="team_money">
                    <p class="t_money">￥2000</p>
                    <p class="t_commission">佣金：249</p>
                </div>
            </div>
            <div class="t_list">
                <div class="list_img">
                    <img src="../assets/images/toux.png" />
                </div>
                <div class="list_c">
                    <p class="lp_name">张三</p>
                    <p class="lp_num">18211020533</p>
                </div>
                <div class="team_money">
                    <p class="t_money">￥2000</p>
                    <p class="t_commission">佣金：249</p>
                </div>
            </div>

    -->

    </div>
   <!-- <div class="members_footer">
      <div class="members_fleft">
        编辑
      </div>
      <div class="members_fright">
        一键邀请好友
      </div>
    </div>-->
    <loading v-show="showLoading "></loading>
  </div>

</template>

<script>
  /* eslint-disable indent,no-tabs,key-spacing,no-mixed-spaces-and-tabs,spaced-comment,comma-spacing,no-undef,no-trailing-spaces,padded-blocks,space-before-function-paren,semi,quotes */

  import Vue from 'vue'
  import Mint from 'mint-ui'
  import 'mint-ui/lib/style.css'
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  // eslint-disable-next-line quotes
  import axios from "axios"
  // eslint-disable-next-line semi
  Vue.prototype.$http = axios;
  // eslint-disable-next-line no-tabs
  Vue.use(Mint)
  export default {
// eslint-disable-next-line indent,key-spacing
    methods: {
      // 隐藏动画
      hideLoading(){
        this.showLoading = false;
      },
      clk: function () {

        this.$http.post(api+'/qqs.us', jsonValue)
      },
      add:function (index) {
        const jsonValue = JSON.stringify({
          "c": "10056",
          "p": {
// eslint-disable-next-line spaced-comment
            "userId": JSON.parse(window.localStorage.data).id, //用户ID
            "tokenId":token(),
            "teamUserId":this.list[index].id,
          }
        });
        this.$http.post(api+'/qqs.us', jsonValue).then((res) => {
// eslint-disable-next-line semi
        })
        this.ok=false
        this.yes=true
      }
    },
    name: 'members',
    data() {
      return {
        telphone: this.telphone,
        ok: true,
        yes:false,
        showLoading: true, //显示加载动画
        list: []
      }
    },
    beforeCreate:function() {
      {
        const jsonValue = JSON.stringify({
          "c": "10055",
          "p": {
// eslint-disable-next-line spaced-comment
            "userId": JSON.parse(window.localStorage.data).id, //用户ID
            "tokenId":token(),
          }
        });
        this.$http.post(api+'/qqs.us', jsonValue).then((res) => {
          this.hideLoading();
// eslint-disable-next-line semi
          this.list = res.data.p.userList;
          console.log(this.list);
        })
      }
    },
    created(){
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)
    }

  }
</script>

<style scoped>
  .mint-header {
    width: 640px;
    background: #1c1b20;
  }
  .members_btn {
    text-align: center;
  }

  .mint-cell-text {
    margin-left: 30px;
  }

  .mint-cell-label {
    margin-left: 53px;
  }

  .newMembers_search {
    width: 640px;
    height: 115px;
    background: #F4F4F4;
    margin-top: 40px;
    padding-top: 20px;
  }
  .search_box {
    width: 640px;
    height: 95px;
    background: #FFFFFF;
    margin-top: 20px;
  }

  .search_imgbox {
    width: 580px;
    height: 60px;
    margin: auto;
  }
  .search_input input {
    font-size: 26px;
    width: 530px;
    height: 59px;
    border-bottom: 1px solid #d2d2d2 !important;
    border: none;
    padding-left: 50px;
    color: #a1a1a1;
  }

  .search_input img {
    position: relative;
    top: 50px;
  }

  .members_title {
    width: 610px;
    height: 50px;
    background: #f4f4f4;
    margin-top: 70px;
    line-height: 50px;
    padding-left: 30px;
    color: #3b3b43;
    font-size: 24px;
  }

  .accept {
    width: 130px;
    height: 50px;
    margin: auto;
    margin-top: 45px;
    line-height: 50px;
    color: #FFFFFF;
    font-size: 24px;
    background: url(../assets/images/btn@1x.png);
    background-size: cover;
  }

  .yi_accept {
    font-size: 26px;
    color: #888888;
    line-height: 131px;
  }

  .members_imgbox img {
    width: 80px;
    height: 80px;
  }

  .members_p {
    width: 147px;
    height: 135px;
    float: left;
    padding-top: 34px;
  }

  .p1 {
    color: #3b3b43;
    font-size: 24px;
  }

  .p2 {
    color: #a1a1a1;
    font-size: 24px;
    margin-top: 20px;
  }

  .members_icon {
    width: 15px;
    height: 135px;
    float: right;
    margin-top: 56px;
    margin-right: 30px;
  }

  .members_icon img {
    width: 12px;
    height: 22px;
  }

  .members_list {
    width: 640px;
    min-height: 750px;
  }

  .m_list {
    width: 640px;
    height: 131px;
    float: left;
    border-bottom: 1px solid #F4F4F4;
  }

  .list_img {
    width: 112px;
    height: 131px;
    float: left;
    padding-top: 9px;
  }

  .list_img img {
    width: 112px;
    height: 112px;
    margin-left: 24px;
  }

  .list_c {
    width: 160px;
    height: 131px;
    float: left;
    margin-left: 40px;
    padding-top: 28px;
  }

  .lp_name {
    font-size: 24px;
    color: #3b3b43;
  }

  .lp_num {
    font-size: 24px;
    color: #afafaf;
    margin-top: 23px;
  }

  .icon_img {
    width: 15px;
    height: 131px;
    float: right;
    line-height: 131px;
    margin-right: 30px;
  }

  .icon_img img {
    width: 12px;
    height: 22px;
  }

  .members_money {
    width: 180px;
    height: 131px;
    float: right;
    text-align: center;
  }

  .m_money {
    margin-top: 36px;
    font-size: 32px;
    color: #fe3519;
  }

  .m_commission {
    color: #cacaca;
    font-size: 20px;
    margin-top: 14px;
  }

  .members_footer {
    width: 640px;
    height: 80px;
    border-top: 1px solid #F4F4F4;
  }

  .members_fleft {
    width: 318px;
    height: 80px;
    text-align: center;
    color: #333;
    font-size: 26px;
    line-height: 80px;
    float: left;
    border-right: 1px solid #F4F4F4;
  }

  .members_fright {
    width: 320px;
    height: 80px;
    text-align: center;
    color: #fe3519;
    font-size: 26px;
    line-height: 80px;
    float: left;
  }
</style>
